<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/first' }">首页：</el-breadcrumb-item>
      <el-breadcrumb-item>人事管理</el-breadcrumb-item>
      <el-breadcrumb-item>请假管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <!-- 审批状况、待审批列表切换 -->
    <el-row>
      <el-button type="primary" plain @click="show(1)">审批状况</el-button>
      <el-button type="success" plain @click="show(2), dsp()">待审批</el-button>
    </el-row>
    <br />
    <!-- 查询 -->
    <!-- 审批状况 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      border
      v-show="isShow1"
    >
      <el-form-item label="状态：">
        <el-select v-model="formInline.zhuangtai" clearable placeholder="请选择">
          <el-option label="同意" value="1"></el-option>
          <el-option label="驳回" value="2"></el-option>
          <el-option label="未审批" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlequery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="leaveData" style="width: 100%" border v-show="isShow1">
      <el-table-column prop="UserName" label="员工"> </el-table-column>
      <el-table-column prop="Beginday" label="开始时间">
        <template slot-scope="scope">
          {{ scope.row.Beginday | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="Endday" label="结束时间">
        <template slot-scope="scope">
          {{ scope.row.Endday | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="QJType" label="请假原因"> </el-table-column>
      <el-table-column prop="QJStatus" label="状态"> </el-table-column>
      <el-table-column prop="QJreson" label="审批原因"> </el-table-column>
      <el-table-column prop="Checker" label="审批人"> </el-table-column>
    </el-table>
    <!-- 待审批 -->
    <el-table :data="leaveData2" style="width: 100%" border v-show="isShow2">
      <el-table-column prop="UserName" label="员工"> </el-table-column>
      <el-table-column prop="Beginday" label="开始时间">
        <template slot-scope="scope">
          {{ scope.row.Beginday | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="Endday" label="结束时间">
        <template slot-scope="scope">
          {{ scope.row.Endday | filterTime }}
        </template>
      </el-table-column>
      <el-table-column prop="QJType" label="请假原因"> </el-table-column>
      <el-table-column prop="QJStatus" label="状态"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="
              handlesp(scope.row, scope.row.Mid), (dialogFormVisible = true)
            "
            >审批</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 审批弹窗 -->
    <el-dialog title="审核状态：" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="审核状态：" :label-width="formLabelWidth">
          <el-select
            v-model="xiugaiTable.zhuangtai"
            placeholder="请选择审核状态"
          >
            <el-option label="同意" value="同意"></el-option>
            <el-option label="驳回" value="驳回"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核原因：" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            autocomplete="off"
            v-model="xiugaiTable.yuanyin"
          ></el-input>
        </el-form-item>
        <el-form-item label="审核人：" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="xiugaiTable.ren"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogFormVisible = false), xiugaienter()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import Qs from "../../node_modules/qs";
export default {
  name: "leave",
  // 时间格式化
  filters: {
    filterTime(val) {
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  data() {
    return {
      isShow1: true, // 审批状况显示
      isShow2: false, // 待审批隐藏
      formInline: {
        zhuangtai: "", // 状态
      },
      leaveData: [], // 请假列表
      leaveData2: [], // 待审批列表
      xiugaiTable: [], // 审核弹窗
      dialogFormVisible: false, // 默认隐藏修改弹窗
      formLabelWidth: "90px", // 修改弹窗输入框宽度
      // 审核弹窗数据
      form: {
        zhuangtai: "", // 审核状态
        yuanyin: "", // 审核原因
        ren: "", // 审核人
      },
      bid: "",
    };
  },
  methods: {
    // 审批状况、待审批列表切换
    show(e) {
      if (e == 1) {
        this.isShow1 = true;
        this.isShow2 = false;
      } else {
        this.isShow1 = false;
        this.isShow2 = true;
      }
    },
    // 刷新
    reshow() {
      let that = this;
      axios({
        method: "get",
        url: "http://127.0.0.1:9090/allleave",
      }).then(function (res) {
        that.leaveData = res.data.data;
      });
    },
    // 模糊查询审批状态
    handlequery() {
      let that = this;
      let params = {
        name: this.formInline.zhuangtai,
      };
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/searchleave",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        data: Qs.stringify(params),
      }).then(function (result) {
        that.leaveData = result.data.data;
      });
    },
    // 待审批列表
    dsp() {
      let that = this;
      axios({
        method: "get",
        url: "http://127.0.0.1:9090/allleave2",
      }).then(function (res) {
        that.leaveData2 = res.data.data;
      });
    },
    // 待审批
    handlesp(val, idd) {
      this.dialogFormVisible = true;
      this.bid = idd;
      this.$set(this.xiugaiTable, "zhuangtai", val.QJStatus.toString());
      this.$set(this.xiugaiTable, "yuanyin", val.QJreson.toString());
      this.$set(this.xiugaiTable, "ren", val.Checker.toString());
    },
    xiugaienter() {
      let that = this;
      let params = {
        QJStatus: this.xiugaiTable.zhuangtai,
        QJreson: this.xiugaiTable.yuanyin,
        Checker: this.xiugaiTable.ren,
        Mid: this.bid,
      };
      axios({
        method: "post",
        url: "http://127.0.0.1:9090/dspleave",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        data: Qs.stringify(params),
      }).then(function (res) {
        if (res.data.state == 1) {
          alert("修改成功");
        } else {
          alert("修改失败");
        }
        that.dialogFormVisible = false;
        that.reshow();
      });
    },
  },
  mounted() {
    this.reshow();
  },
};
</script>

<style scoped>
/* 列表切换、模糊查询左对齐 */
.el-row,
.el-form {
  text-align: left;
}
</style>